<template>
    <el-carousel :interval="5000" arrow="always" height="900px">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="Carousel Image" class="carousel-image">
      </el-carousel-item>
    </el-carousel>

  
   


</template>
  
  <script>
  export default {
    data() {
      return {
        images: [
          'https://copyright.bdstatic.com/vcg/creative/374161eb9adb9b36316b42e518a2b37d.jpg@h_1280',
          'https://copyright.bdstatic.com/vcg/creative/87b1e00f30ec98b5aec71d62a5aa90d4.jpg@h_1280',
          'http://img0.baidu.com/it/u=1429789675,4005654086&fm=253&app=120&f=JPEG?w=889&h=500',
          // 添加更多图片 URL
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  /* 调整样式以适应图片 */
  .el-carousel__item img {
    display: block; /* 移除图片底部的间隙 */
    width: 100%; /* 使图片宽度适应容器 */
    height: 100%; /* 保持图片的宽高比 */
    filter: blur(5px);
  }
  .carousel-container {
  position: relative; /* 确保登录页面可以相对于轮播图定位 */
}
 
.login-page {
  position: absolute; /* 绝对定位登录页面 */
  top: 0; /* 根据需要调整位置 */
  left: 0; /* 根据需要调整位置 */
  width: 100%; /* 根据需要调整宽度 */
  height: 100%; /* 根据需要调整高度，可能需要设置为一个较小的值以仅覆盖部分内容 */
  z-index: 1; /* 确保登录页面位于轮播图之上 */
  background-color: rgba(255, 255, 255, 0.8); /* 可选：为登录页面添加一个半透明的背景色 */
  /* 其他样式，如文本颜色、对齐方式等 */
}
  
  
  </style>